import { useState, useMemo, useEffect, createElement } from 'react';
import { Radio } from 'antd';
import { Tag, Select } from 'antd';
import { getMessage } from '@inbiz/react';
import { getUserGroupList } from './service';
import IconGroup from './icons/ic-group';
import './style.less';
const { Option } = Select;

export default function UserGroupRange(props: any) {
  const { value, onChange } = props;
  const [typeValue, setTypeValue] = useState(value?.type || 'all');
  const [dataValue, setDataValue] = useState<any[]>(
    value?.type == 'all' ? [] : value?.data?.map((item: any) => item?.Id) || [],
  );
  const [dataOptions, setDataOptions] = useState([]);
  const [requestDone, setRequestDone] = useState(false);

  const typeData = useMemo(() => {
    return [
      {
        label: getMessage('DataSource.all'),
        value: 'all',
      },
      {
        label: getMessage('DataSource.custom'),
        value: 'custom',
      },
    ];
  }, []);

  useEffect(() => {
    getUserGroupList().then((res) => {
      if (res?.rows) {
        let _dataOptions = JSON.parse(res?.rows);
        setDataOptions(_dataOptions);
        setRequestDone(true);
      }
    });
  }, []);

  useEffect(() => {
    if (requestDone) {
      onChange({
        type: typeValue,
        data:
          typeValue == 'all'
            ? dataOptions
            : dataOptions?.filter((item: any) => dataValue?.includes(item?.Id)),
      });
    }
  }, [typeValue, dataValue, dataOptions]);

  const onTypeChange = (e: any) => {
    setTypeValue(e?.target?.value);
  };

  const onDataChange = (value: any[]) => {
    setDataValue(value);
  };

  const removeDataItem = (value: string) => {
    let _dataValue = dataValue.filter((item: any) => item != value);
    setDataValue(_dataValue);
  };

  return (
    <div className="setter-user-group-range">
      <Radio.Group onChange={onTypeChange} value={typeValue}>
        {typeData?.map((item) => {
          return (
            <Radio value={item.value} key={item.value}>
              {item.label}
            </Radio>
          );
        })}
      </Radio.Group>
      {typeValue == 'custom' && (
        <Select
          mode="multiple"
          tagRender={(props) => {
            return (
              <Tag
                {...props}
                className={`setter-user-group-range-data-tag`}
                icon={createElement(IconGroup)}
                onClose={(e) => {
                  removeDataItem(props.value);
                }}
                onMouseDown={(e) => {
                  e.stopPropagation();
                }}
              >
                {dataOptions?.filter((item: any) => item?.Id == props.value)?.[0]?.Name}
              </Tag>
            );
          }}
          value={dataValue}
          filterOption={(data, option) => {
            return option?.label.search(data) > -1
          }}
          onChange={onDataChange}
          getPopupContainer={() => document.body}
          dropdownClassName="setter-user-group-range-data-popup"
        >
          {dataOptions?.map((item: any) => {
            return (
              <Option value={item?.Id} label={item?.Name} key={item?.Id} >
                <div className="setter-user-group-range-data-item">
                  {createElement(IconGroup)}
                  <span>{item?.Name}</span>
                </div>
              </Option>
            );
          })}
        </Select>
      )}
    </div>
  );
}
